<template>
  <el-dropdown :show-timeout="100" trigger="click">

    <el-button plain>
      {{ selectedList | seletedListFilter }}
      <i class="el-icon-caret-bottom el-icon--right" />
    </el-button>

    <el-dropdown-menu slot="dropdown" class="no-padding">
      <el-dropdown-item>
        <el-radio-group v-model="selectedList" style="padding: 10px;">

          <el-radio :label= 0 >
            全体
          </el-radio>

          <el-radio :label= 1 >
            管理员
          </el-radio>

          <el-radio :label= 2 >
            编辑者
          </el-radio>

          <el-radio :label= 3 >
            教师
          </el-radio>

          <el-radio :label= 4 >
            校友
          </el-radio>

          <el-radio :label= 5 >
            学生
          </el-radio>

        </el-radio-group>
      </el-dropdown-item>
    </el-dropdown-menu>

  </el-dropdown>
</template>

<script>
export default {

  filters: {
    seletedListFilter(status) {
      const statusMap = {
        "0": '（已选择）全体',
        "1": '（已选择）管理员',
        "2": '（已选择）编辑者',
        "3": '（已选择）教师',
        "4": '（已选择）校友',
        "5": '（已选择）学生',
      }
      return statusMap[status]
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  computed: {
    selectedList: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
